import {Component, ElementRef, ChangeDetectorRef, Inject, AfterViewInit} from '@angular/core';
import {PopoverOptions} from './popover.interface';
import {positionService} from '../util/position';

@Component({
    selector: 'popover-container',
    styleUrls: ['popover-container.component.css'],
    templateUrl: 'popover-container.component.html'
})
export class PopoverContainer implements AfterViewInit {
    classMap: any;
    top: string = '-1000px';
    left: string = '-1000px';
    display: string = 'block';
    content: string;
    placement: string;
    animation: boolean;
    isOpen: boolean;
    appendToBody: boolean;
    hostEl: ElementRef;
    html: boolean = false;
    htmlContent: string;

    element: ElementRef;
    cdr: ChangeDetectorRef;

    constructor(el: ElementRef, cdr: ChangeDetectorRef, @Inject(PopoverOptions) options: PopoverOptions) {
        this.element = el;
        this.cdr = cdr;
        Object.assign(this, options);
        this.classMap = {'in': false, 'fade': false};
        this.classMap[options.placement] = true;
    }

    ngAfterViewInit() {
        let p = positionService.positionElements(
            this.hostEl.nativeElement,
            this.element.nativeElement.children[0],
            this.placement, this.appendToBody
        );

        this.top = p.top + 'px';
        this.left = p.left + 'px';
        this.classMap.in = true;
        if (this.animation) {
            this.classMap.fade = true;
        }

        if (this.html) {
            this.htmlContent = this.content;
            this.content = '';
        }

        this.cdr.detectChanges();
    }
}